<template>
  <div class="order flex flex-column">
    <van-nav-bar title="提现记录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="order-list flex-1">
      <div class="order-item flex" v-for="withdraw in withdraw_list" :key="withdraw.id">
        <div class="order-main flex-1">
          <div class="order-content flex flex-content-between">
            <div>提现单号:{{ withdraw.orderId }}</div>
            <van-tag type="success" v-if="withdraw.withdrawStatus === 'SUCCESS'"  plain round>成功</van-tag>
            <van-tag type="danger" v-if="withdraw.withdrawStatus === 'FAIL'"  plain round>失败</van-tag>
            <van-tag type="primary" v-if="withdraw.withdrawStatus === 'PROCESS'"  plain round>进行</van-tag>
          </div>
          <!-- <div class="order-content flex flex-content-between">
            <div>抖音<van-divider vertical />14789945242</div>
          </div> -->
          <!-- <div class="order-sub-content">抖音：14789945242{{ item }}</div> -->
          <div class="order-bottom flex flex-content-between">
            <div class="time">
              {{ withdraw.ctime }}
            </div>
            <div class="more flex flex-center" type="success" v-if="withdraw.withdrawStatus === 'SUCCESS'">{{ withdraw.amount }}</div>
            <!-- <div class="more flex flex-center" type="danger" v-if="withdraw.withdrawStatus === 'FAIL'" >{{ withdraw.amount }}</div>
            <div class="more flex flex-center" type="primary" v-if="withdraw.withdrawStatus === 'PROCESS'">{{ withdraw.amount }}</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" name="ChildView" setup>
import {inject, ref} from "vue";
import {getCurrentInstance} from "@vue/runtime-core";
const $ajax: any = inject("$ajax")
const $api: any = inject("$api")
const currentInstance: any = getCurrentInstance()
const $this = currentInstance.proxy
let withdraw_list:any = ref([]);
async function get_withdraw_list() {
  const data = await $ajax(
      {
        api: $api.withdraw_list,
      }
  )
  withdraw_list.value = data.data.withdrawList
}
get_withdraw_list();
//返回
const onClickLeft = () => {
  history.back()
}
</script>
<style lang="less" scoped>
.order {
  height: 100%;
  font-size: 0.16rem;
  .order-list {
    overflow: auto;
    .order-item {
      height: 0.64rem;
      background: #fff;
      padding: 0.06rem;
      margin-top: 0;
      &:not(last-child) {
        border-bottom: 1px solid #e2eeff;
      }
      // &:last-child{
      //   border-bottom: 0
      // }
      .order-icon {
        width: 0.45rem;
        font-size: 0.18rem;
        color: #628cff;
        img {
          width: 100%;
        }
      }
      .order-main {
        padding: 0 0.12rem;
        .order-content {
          font-size: 0.14rem;
          :deep(.van-tag) {
            font-size: 0.12rem;
            border: 0;
            border-radius: 0.06rem;
            padding: 0 0.06rem;
            line-height: 0.12rem;
          }
        }
        .order-bottom {
          margin-top: 0.06rem;
          .time {
            color: #bfbfbf;
            font-size: 0.13rem;
            :deep(i) {
              margin-right: 0.03rem;
            }
            :deep(.van-divider--vertical){
              margin: 0 0.04rem;
              border-color: #bfbfbf;
            }
          }
          .more {
            // width: 0.78rem;
            // height: 0.26rem;
            flex-shrink: 0;
            border-radius: 0.34rem;
            // background: linear-gradient(99deg, #f1f4ff 1.64%, #e1e7fe 27%, #d5ebff 98.52%);
            color: #4e7dff;
            font-family: 'PingFang SC';
            font-size: 0.12rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            &[type="success"]{
              color:  var(--van-success-color);
            }
            &[type="danger"]{
              color:  var(--van-danger-color);
            }
            &[type="primary"]{
              color: var(--van-primary-color);
            }
          }
        }
      }
    }
  }
}
</style>
